<template>
  <div>
    <div>
      <el-form>
        <el-form-item>
          设置报警时间范围：
          <el-time-picker
              is-range
              arrow-control
              v-model="value"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="设置报警时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="setTime">确定</el-button>
        </el-form-item>

      </el-form>

    <!-- 搜索功能 -->
<!--    <div>-->
<!--      <el-select v-model="searchValues.dsAreaId">-->
<!--        <el-option :value="item.dsAreaId" label="全部"></el-option>-->
<!--        <el-option v-for="one in areas" :value="one.dsAreaId" :key="one.dsAreaId" :label="one.dsAreaName"></el-option>-->
<!--      </el-select>-->
<!--      <el-select v-model="searchValues.dsTypeId">-->
<!--        <el-option :value="item.dsTypeId" label="全部"></el-option>-->
<!--        <el-option v-for="one in types" :value="one.dsTypeId" :key="one.dsTypeId" :label="one.dsTypeName"></el-option>-->
<!--      </el-select>-->
<!--      <el-select v-model="searchValues.dsDeviceRunStatus">-->
<!--        <el-option :value="item.dsDeviceRunStatus" label="全部"></el-option>-->
<!--        <el-option v-for="one in dsDeviceRunStatusByNameAndId" :value="one.dsDeviceRunStatusId"-->
<!--                   :key="one.dsDeviceRunStatusId" :label="one.dsDeviceRunStatusName"></el-option>-->
<!--      </el-select>-->
<!--      <el-input style="width: 200px" v-model="searchValues.dsDeviceMac"/>-->

<!--      <el-button class="ml-15" type="primary" @click="searchDeviceBySearchValues()">搜索</el-button>-->
<!--      <el-button class="ml-15" type="success" @click="searchDeviceBySearchValuesAll()">显示全部</el-button>-->

<!--    </div>-->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="上线设备" name="Up" >
      </el-tab-pane>
      <el-tab-pane label="未启设备" name="Down">
      </el-tab-pane>
    </el-tabs>
    <div>
      <router-view></router-view>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "DeviceTableView",
  data() {
    return {
      value:[new Date(), new Date()],
      item : {
        dsDeviceModel:null,
        dsDeviceMac:null,
        dsDeviceAddr:null,
        dsDeviceDisable:null,
        dsDeviceFirmware:null,
        dsAreaId:{
          createTime: null,
          deleted: null,
          dsAreaId: null,
          dsAreaName: null,
          dsAreaNote: null,
          modifyTime: null
        },
        dsTypeId: [this.type],
        createTime:null,
        modifyTime:null,
        deleted:null,
        dsDeviceId:null,
        dsDeviceStatus:null,
        dsDeviceRunStatus: null
      },
      tableData: [
       this.item
      ],
      area: {
        createTime: null,
        deleted: null,
        dsAreaId: null,
        dsAreaName: null,
        dsAreaNote: null,
        modifyTime: null
      },
      areas: [
        this.area
      ],
      type: {
        createTime: null,
        deleted: null,
        dsTypeId: null,
        dsTypeName: null,
        modifyTime: null
      },
      types: [
        this.type
      ],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      formTitle: '新增',
      pageTotal: 0, //共有多少条数据
      currentPage: 1, //第几页
      pageSize: 5,  //每页多少条数据
      searchValue: '',
      activeName: 'role',

      isUpdataUp:false,
      isUpdataDown:false,
      // searchValues: {
      //   page: this.currentPage, //第几页
      //   pageSize: this.pageSize,  //每页多少条数据
      //   dsAreaId: null,
      //   dsTypeId: null,
      //   dsDeviceRunStatus: null,
      //   dsDeviceMac: null
      // },
      // dsDeviceRunStatusByNameAndId: [
      //   {
      //     dsDeviceRunStatusId: 1,
      //     dsDeviceRunStatusName: "上线"
      //   }, {
      //     dsDeviceRunStatusId: 2,
      //     dsDeviceRunStatusName: "待用"
      //   }, {
      //     dsDeviceRunStatusId: 3,
      //     dsDeviceRunStatusName: "掉线"
      //   }, {
      //     dsDeviceRunStatusId: 4,
      //     dsDeviceRunStatusName: "禁用"
      //   }, {
      //     dsDeviceRunStatusId: 5,
      //     dsDeviceRunStatusName: "休眠"
      //   },
      // ]

    }
  },
  methods:{
    setTime() {
      this.api.deviceApi.setTime(this.value).then(
      ).catch(e => {
        this.$notify.error({
          title: '失败',
          message: '信息：' + e
        })
      })
    },
    handleClick(){
      if(this.activeName ==='Up'){
        this.isUpdataUp = true;
        this.isUpdataDown = false;
        this.$router.push('/device/up')

      }
      else if(this.activeName ==='Down'){
        this.isUpdataUp = false;
        this.isUpdataDown = true;
        this.$router.push('/device/down')
      }
    },

    selectCurrentPageDevice: function (page, pageSize, name) {
      this.api.deviceApi.selectDevicePage(page, pageSize, name).then((response)=>{
        this.tableData = response[0]
        this.pageTotal = response[1]
      }).catch((error)=>{
        this.tableData = error
      })
    },

    editHandler: function () {
      if (this.item.dsDeviceId == null) {
        this.addDevice(this.item)
      } else {
        this.editDevice(this.item)
      }
    },
    // rebootDevice() {
    //   this.api.deviceApi.rebootDevice();
    // },
    // searchDeviceBySearchValues() {
    //   this.currentPage = 1
    //   if (this.searchValues!=null){
    //     this.searchValues.pageSize = this.pageSize
    //     this.searchValues.page = this.currentPage
    //     this.api.deviceApi.searchDeviceBySearchValues(this.searchValues).then(res=> {
    //       this.tableData=res[0]
    //       this.pageTotal=res[1]
    //     }).catch(error => {
    //       console.log(error)
    //     })
    //   }
    // },
    // searchDeviceBySearchValuesAll(){
    //   this.searchValues.pageSize = this.pageSize
    //   this.searchValues.page = this.currentPage
    //   this.searchValues.dsAreaId=null
    //   this.searchValues.dsTypeId=null
    //   this.searchValues.dsDeviceRunStatus=null
    //   this.searchValues.dsDeviceMac=null
    //   this.api.deviceApi.searchDeviceBySearchValues(this.searchValues).then(res=> {
    //     this.tableData=res[0]
    //     this.pageTotal=res[1]
    //   }).catch(error => {
    //     console.log(error)
    //   })
    // }
  },

  mounted() {
     this.selectCurrentPageDevice(this.currentPage, this.pageSize, this.searchValue)
    this.api.areaApi.selectAreas()
        .then(res => {this.areas = res})
        .catch(error => {console.log(error)})

    this.api.typeApi.selectTypes()
        .then(res => {this.types = res})
        .catch(err => {console.log(err)})
  },

}
</script>
